
<!DOCTYPE HTML>
<html>
<head>
<title>动态操作表格</title>
<meta charset="utf-8" />
<style>
	table{width:1200px; border-collapse:collapse;
		text-align:center;
		margin: 0 auto;
		table-layout: fixed;
	}
	td{border:1px solid #ccc}
	thead td{font-weight:bold;}
</style>
<script>
	
	
</script>
</head>
<body>
	<div id="data1">
		
	</div>
	
	<script type="text/javascript">
		var data=[
			{"id":1001,"name":'可口可乐',"price":2.5,"count":3000},
			{"id":1003,"name":'百事可乐',"price":2.5,"count":5000},
			{"id":1011,"name":'非常可乐',"price":2.3,"count":1000},
			{"id":1011,"name":'天府可乐',"price":2.3,"count":1000},
			{"id":1011,"name":'地府可乐',"price":2.3,"count":1000},
			{"id":1011,"name":'阳间可乐',"price":2.3,"count":1000},
			{"id":1011,"name":'阴间可乐',"price":2.3,"count":1000},
		];
		//根据数据生成一个表格
		var bd=document.getElementsByTagName("body")[0];
		var table=document.createElement("table");
		//表头
		var tr=document.createElement("tr");
//		var arr=["id","name","price","count","操作"];
			for(var i in data[0]){
				var td=document.createElement("td");
				td.innerHTML=i;
				tr.appendChild(td);
			}
				var td=document.createElement("td");
				td.innerHTML="delete";
				tr.appendChild(td);						
				table.appendChild(tr);
			
		for(var i=0;i<data.length;i++){
			var tr=document.createElement("tr");
			
			for(var j in data[i]){
				var td=document.createElement("td");
				td.innerHTML=data[i][j];
				tr.appendChild(td);
				table.appendChild(tr);
			}
				var td=document.createElement("td");
				td.innerHTML="<button>x</button>";
				tr.appendChild(td);
				table.appendChild(tr);
				
			
		}
		
		bd.appendChild(table);		
		var buts=document.querySelectorAll("button");
		console.log(buts);
		for(var p=0;p<buts.length;p++){
			buts[p].onclick=function(){
//				console.log(this.parentNode.parentNode.firstElementChild.nextElementSibling);
				var bool=confirm("确定要删除掉"+this.parentNode.parentNode.firstElementChild.nextElementSibling.innerHTML+"吗?");
//				console.log(this.parentNode.parentNode);
				if(bool){
					this.parentNode.parentNode.remove();
				}
				
			}
		}
	</script>
</body>
</html>
